<!--
  ~ Copyright 2020 Netflix, Inc.
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~    http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<html>
<head>
    <title>Simple GraphiQL Example</title>
    <link href="https://unpkg.com/graphiql/graphiql.min.css" rel="stylesheet" />
</head>
<body style="margin: 0;">
<div id="graphiql" style="height: 100vh;"></div>

<script
        crossorigin
        src="https://unpkg.com/react/umd/react.production.min.js"
></script>
<script
        crossorigin
        src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"
></script>
<script
        crossorigin
        src="https://unpkg.com/graphiql/graphiql.min.js"
></script>

<script>
    const graphQLFetcher = (graphQLParams, headers) =>
        fetch('/graphql', {
            method: 'post',
            headers: headers.headers || {},
            body: JSON.stringify(graphQLParams),
        })
            .then(response => response.json())
            .catch(() => response.text());
    ReactDOM.render(
        React.createElement(GraphiQL, { fetcher: graphQLFetcher, headerEditorEnabled: true, shouldPersistHeaders: true, headers: JSON.stringify({"Content-Type": "application/json"})}),
        document.getElementById('graphiql'),
    );
</script>
</body>
</html>